<!--
 * @Date: 2022-06-15 09:27:31
 * @Author: 陶子
 * @LastEditTime: 2022-06-16 14:21:25
 * @FilePath: \jk_one-stop_cloud_mobile_v1.0\src\views\warehouseManagement\goodsManagement\SearchTag.vue
 * @pageName: 这是--(物品管理——筛选)--页面
-->
<template>
  <div class="search-content wrap-apply" :style="{top: GLOBAL.currentEnvironment ? '0' : ''}" v-show="showSearchTag">
    <Search ref="topSearch" class="search" placeholder="入库任务编号 | 物品名称" :isAdd="false" :isScreen="false" :isType="false"></Search>
    <div class="searchBox">
      <van-cell-group>
        <p class="label FormTit"><span></span>入库任务编号</p>
        <van-field v-model="filterForm.taskCode" placeholder="请输入" />
        <div class="bottomLine"></div>
      </van-cell-group>
      <van-cell-group>
        <p class="label FormTit"><span></span>业务类型</p>
        <van-field-select-picker label="" placeholder="请选择" :inputAlign="'left'" :supportClear='true' v-model="filterForm.operateTaskType" :columns="warehousingTypes"
          :option="{ label: 'text', value: 'value' }" @confirm="(itemReport) => selectReport(itemReport, 'operateTaskType')"/>
        <div class="bottomLine"></div>
      </van-cell-group>
      <van-cell-group>
        <p class="label FormTit"><span></span>源单号</p>
        <van-field v-model="filterForm.sourceCode" placeholder="请输入" />
        <div class="bottomLine"></div>
      </van-cell-group>
      <van-cell-group>
        <p class="label FormTit"><span></span>物品名称</p>
        <van-field v-model="filterForm.goodsName" placeholder="请输入" />
        <div class="bottomLine"></div>
      </van-cell-group>
    </div>
    <div class="search-bottom">
      <span class="btncancel" @click="btnCancel">重置</span>
      <span class="btnconfirm" @click="btnConfirm">确定</span>
    </div>
  </div>
</template>

<script>
import {
  getDictItemsByTypes,
} from "@/api/inventoryOrder";
import store from "@/store";
import VanFieldSelectPicker from "@/components/ActionSheet/VanFieldSelectPicker";
import Search from "@/components/search";

export default {
  name: "search",
  components: {
    Search,
    VanFieldSelectPicker,
  },
  data() {
    return {
      activeIndex: 0,
      showSearchTag: false,
      warehousingTypes: [],
      /***** */
      filterForm: {
        taskCode: '',
        operateTaskType: '',
        sourceCode: '',
        goodsName: '',
      },
    };
  },
  created() {
    store.commit('SET_CURRENT_PREFIX', '/jksaas-produce/produce')
    // 获取入库任务类型
    getDictItemsByTypes({type: 3}).then((res) => {
      if(res.code == 200 && res.result) {
        this.warehousingTypes = res.result
      }
    });
  },
  methods: {
    //入库类型选择
    selectReport(itemReport, key) {
      if (itemReport) {
        this.filterForm[key] = itemReport.value;
      } else {
        this.filterForm[key] = ""
      }
    },
    // 打开筛选
    showModal(keyword, dropdownObj, goodTypeList, categoryList, activeIndex) {
      this.showSearchTag = true;
      this.$nextTick(() => {
        this.$refs.topSearch.value = keyword;
      });
    },
    // 重置筛选
    btnCancel() {
      this.$refs.topSearch.value = "";
      this.filterForm = {
        taskCode: '',
        operateTaskType: '',
        sourceCode: '',
        goodsName: '',
      };
      this.activeIndex = 0;
    },
    // 确认筛选
    btnConfirm() {
      let { taskCode,operateTaskType, sourceCode, goodsName } = this.filterForm
      let sureObj = {
        taskCode: taskCode,
        operateTaskType: operateTaskType,
        sourceCode: sourceCode,
        goodsName: goodsName,
        keyword: this.$refs.topSearch.value,
      };

      this.showSearchTag = false;      
      this.$emit("getCategory", sureObj);
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/theme.scss";
.search-content {
  position: fixed;
  top: 70px;
  width: 100%;
  height: 100vh;
  background: #f5f5f5;
  z-index: 99;
  .formgroup {
    background: #ffffff;
    // padding: 0 0.16rem;
    margin-top: 0.1rem;
    margin-bottom: 0.2rem;
    padding-top: 0.1rem;

    .title {
      width: 0.58rem;
      height: 0.14rem;
      font-size: 0.15rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #191f25;
      line-height: 0.05rem;
      margin-left: 0.16rem;
    }
  }
  .search-bottom {
    width: 100%;
    background: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: 0px;
    padding: 12px;
    font-size: 32px;
    font-weight: 500;
    .btncancel {
      flex: 1;
      background: #f6f6f6;
      // border: 0.01rem solid rgba(25, 31, 37, 0.12);
      box-sizing: border-box;
      height: 78px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 2px;
      margin-right: 1px;
      color: #191f25;
    }
    .btnconfirm {
      flex: 1;
      background: #1890ff;
      box-sizing: border-box;
      height: 78px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 6px;
      color: #ffffff;
    }
  }
}
.bottomLine {
  height: 1px;
  background-color: #f0f0f0;
  margin: 0 3px;
}
.searchBox {
  height: calc(100vh - 295px);
  overflow-y: auto;
  padding: 20px 0;
}
.dh-field {
  padding: 0 34px;
  background: #fff;
  .dh-cell.van-cell {
    padding: 10px 0 14px;
  }
  .dh-cell.van-cell--required::before {
    left: -8px;
  }
  .van-popup {
    border-radius: 20px 20px 0 0;
  }
}
.haveUnitBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding-right: 0.16rem;
  /deep/ .van-cell {
    padding-right: 0;
    width: 2.6rem;
  }
  /deep/ .van-field__control {
    max-width: 3rem;
  }
}
</style>